<div id="main">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel">{:lang("add/change_carrier")}</h4>
</div>
<div class="modal-body">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab" @click="changelang('zh')">{:lang('Chinese')}</a>
                </li>
                <li>
                    <a href="#profile" data-toggle="tab" @click="changelang('en')">{:lang('English')}</a>
                </li>
                <li>
                    <a href="#messages" data-toggle="tab" @click="changelang('pt')">{:lang('Portuguese')}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            {if ($str eq 'carrieredit')}
            <table class="table table-hover ntTable" style="margin-bottom: 0;">
                <tbody>
                <tr>
                    <td>{:lang('name')}<span class="required"></span></td>
                    <td>
                        <input type="text" class="form-control" v-model="data.lang_zh">
                    </td>
                </tr>
                </tbody>
            </table>
            {/if}
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            {if ($str eq 'carrieredit')}
            <table class="table table-hover ntTable" style="margin-bottom: 0;">
                <tbody>
                <tr>
                    <td>{:lang('name')}<span class="required"></span></td>
                    <td>
                        <input type="text" class="form-control" v-model="data.lang_en">
                    </td>
                </tr>
                </tbody>
            </table>
            {/if}
        </div>
        <div role="tabpanel" class="tab-pane" id="messages">
            {if ($str eq 'carrieredit')}
            <table class="table table-hover ntTable" style="margin-bottom: 0;">
                <tbody>
                <tr>
                    <td>{:lang('name')}<span class="required"></span></td>
                    <td>
                        <input type="text" class="form-control"v-model="data.lang_pt" >
                    </td>
                </tr>
                </tbody>
            </table>
            {/if}
        </div>
        <div class="row clearfix">
            <div class="col-md-12">
                <table class="table table-hover ntTable">
                    <tbody>
                    {if ($str eq 'carrieradd')}
                    <tr>
                        <td>{:lang('name')}<span class="required"></span></td>
                        <td><input type="text" class="form-control" v-model="data.carriername"></td>
                    </tr>
                    {/if}
                    <tr>
                        <td>{:lang('code')}<span class="required"></span></td>
                        <td><input type="text" class="form-control" v-model="data.code" value=""></td>
                    </tr>
                    <input type="hidden" id="act" name="act" value="{$str}">
                    <input type="hidden" name="id" id="id" value="{$id|default=''}">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('cancel')}</button>
    <button type="button" @click="subfun" class="btn btn-primary" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
</div>
</div>
<script>
    new Vue({
        el: '#main',
        data: () => ({
            lang: 'zh',//语言
            iftijiao: true,
            data: {
                lang_zh: '',
                lang_en: '',
                lang_pt: '',
                carriername: '',
                code:'',
            }
        }),
        methods: {
            //保存数据
            subfun(){
                if (this.iftijiao) {
                    //提交的内容
                    if ($('#act').val() == 'carrieredit') {
                        var data = {
                            lang_zh: this.data.lang_zh,
                            lang_en: this.data.lang_en,
                            lang_pt: this.data.lang_pt,
                            act: $('#act').val(),
                            code: this.data.code,
                            id: $('#id').val(),
                        }
                    } else {
                        var data = {
                            act: $('#act').val(),
                            carriername: this.data.carriername,//{:lang("carrier_name")}
                            code: this.data.code,
                        }
                    }
                    $.ajax({
                        url: '/admin/logistics/' + $('#act').val(),
                        data,
                        type: 'post',
                        success: (data) => {
                            data = JSON.parse(data)
                            if (data.status != 1) {
                                change_mes_type('.modal-body .alert',data.status)
                                $('.modal-body .alert').show()
                                $('.modal-body .alert p').html('*' + data.msg + '<br>')
                            } else {
                                change_mes_type('.alert',data.status)
                                this.iftijiao = false
                                $('.alert').show()
                                $('.alert p').html('*' + data.msg + '<br>')
                                $('#carrier_editModal').modal('toggle')
                            }
                        }
                    })
                }
            },
            //获取编辑的数据
            getalldata(){
                if($('#id').val()){
                    $.ajax({
                        url: '/admin/logistics/' + $('#act').val(),
                        data: {
                            getcarrier: '',
                            id: $('#id').val()
                        },
                        type: 'post',
                        dataType: 'json',
                        success: (data) => {
                            if (data.info) {
                                //编辑的状态
                                this.data.lang_zh = data.info.lang_zh;
                                this.data.lang_en = data.info.lang_en;
                                this.data.lang_pt = data.info.lang_pt;
                                this.data.code = data.info.code;
                            }
                        }
                    })
                }

            },
            //改变语言
            changelang(lang){
                this.lang = lang;
            }
        },
        created() {
            this.getalldata()
        }
    })
</script>